			<section id="top-image">
				<section id="form">
					<h2>Cari Jadwal Kajian</h2>
					<hr />
					<br />
					<form action="" class="styled" method="post">	
						<label for="name">Berdasarkan Judul/Tema</label>
						<input class="textbox" type="text" name="q" id="q" value="<?php echo isset($_POST['q'])?$_POST['q']:''?>" />
						
						<label for="name">Berdasarkan Pemateri</label>
						<input class="textbox" type="text" name="pemateri" id="pemateri" value="<?php echo isset($_POST['pemateri'])?$_POST['pemateri']:''?>" />
						<input  type="hidden" name="pemateri_id" id="pemateri_id" value="<?php echo isset($_POST['pemateri_id'])?$_POST['pemateri_id']:''?>"/>
						
						<label for="name">Berdasarkan Hari</label>
						<select id="hari" name="hari" class="textbox">
							<option value=''>Pilih Hari</option>
							<?php foreach(get_day() as $key=>$value){?>
								<option value="<?php echo $key?>" <?php echo (isset($_POST['hari']) && $key==$_POST['hari']?'selected="selected"':'')?>><?php echo $value?></option>
							<?php } ?>
						</select>
						
						<label for="name">Berdasarkan Tanggal</label>
						<input class="textbox" type="text" name="tanggal" id="tanggal" value="<?php echo isset($_POST['tanggal'])?$_POST['tanggal']:''?>" />
						
						<input type="submit" value="Cari..." class="button" />
						
					</form>
				</section>
				
				<!-- Google Map -->
				<section class="top-map">
					<div id="map" style="height:360px;float:center;"></div>
				</section>
				<!-- END Google Map -->
			</section>
			
			<!-- BEGIN #main -->
			<section id="main">
				
				<!-- BEGIN #bottom -->
				<section id="bottom">
			
					<!-- BEGIN .cols -->
					<section class="cols">
					
						<!-- BEGIN Column One (one_third) -->
						<section class="one_third" >
								<h3 class="font-ad">Jadwal Kajian untuk Kota <?php echo ucwords($nama_kota)?></h3>
								<ul class="events scroll" style="overflow:auto;height:360px">
									<?php

									$data = $kajian['data'];
									$map=array();
									for($day=0; $day<=30; $day++){
										$date =  date('Y-m-d',mktime(0, 0, 0, date("m")  , date("d")+$day, date("Y")));
										$dayofweek = date('N',mktime(0, 0, 0, date("m")  , date("d")+$day, date("Y")));
											
										if(isset($data[$dayofweek])){
											foreach($data[$dayofweek] as $row){
												$cek = true;
												
												if($row['jns_kajian_id'] != 1 && $row['tanggal_mulai'] != $date)
													$cek = false;
												
												if($cek){
												
												$map["$row[lat]_$row[lng]"] = array(
													"lat" => $row['lat'],
													"lng" => $row['lng'],
													"data"=> "".($row['photo'] != ''?"<div style=\"float:left;width:64px;\"><img src=\"".base_url()."images/location/$row[photo]\" width=\"64px\" height=\"64px\"/></div>":"")."<div style=\"float:left;margin-left:10px;\"><strong>$row[nama_lokasi]</strong><br />$row[alamat]<br />$row[keterangan]</div>"
												);
											
									?>
									<li>
										<span class="item-date"><?php echo date('M',strtotime($date))?> <span><?php echo date('d',strtotime($date))?></span></span>
										<h4><a href="<?php echo base_url().'kajian/'.$row['permalink']?>.html"><?php echo $row['judul']?></a></h4>
										<p><em>Tema:</em><?php echo $row['tema']?></p>
										<p><em>Pemateri:</em><?php echo $row['nama_pemateri']?></p>
										<p><em>Waktu:</em><?php echo $row['jam_mulai']?></p>
										<p><em>Tempat:</em><?php echo $row['nama_lokasi'].', '.$row['kota']?></p>
									</li>
									<?php 
												}
											}
										}
									} 
									?>
								</ul>
								<!-- END Events List -->
							
						</section>
						<!-- END Column One (one_third) -->
					
						<!-- BEGIN Column Three (one_third) -->
						<section class="one_third" >
							<h3 class="font-ad">Data Kota</h3>
		
							<ul class="media scroll" style="overflow:auto;height:360px">
							<?php foreach($kota->result_array() as $row){?>					
								<li>
									<span class="icon"><img alt='' src='<?php echo base_url()?>template/css/images/city-32.png' /></span>
									<a href="<?php echo base_url()."kajian/kota/".$row['permalink']?>" title="Klik untuk melihat jadwal kajian di kota <?php echo $row['nama']?>">
										<h4><?php echo $row['nama']?></h4>
									</a>
									<p>
									<?php echo "$row[total_kajian]"?> Jadwal Kajian
									<br />
									<?php echo "$row[total_lokasi]"?> Masjid dan POI lain
									</p>
								</li>
							<?php } ?>
							</ul>
							
						</section>
						<!-- END Column Three (one_third) -->
						
						<!-- BEGIN Column Three (one_third) -->
						<section class="one_third last" >
							<h3 class="font-ad">Petunjuk Jalan</h3>
							<div id="directions" class="" style="overflow:auto;height:360px">
							</div>					
						</section>
						<!-- END Column Three (one_third) -->
						
					</section>
					<!-- END .cols -->
					
				</section>
				<!-- END #bottom -->
			
			</section>
			<!-- END #main -->
			<script>
			
			$(document).ready(function(){
				$('#tanggal').DatePicker({
					format:'d-m-Y',
					date: '<?php echo date('d-m-Y')?>',
					current: '<?php echo date('d-m-Y')?>',
					starts: 1,
					position: 'r',
					onChange: function(formated, dates){
						$('#tanggal').val(formated);
						$('#tanggal').DatePickerHide();
					}
				});
				
				$("#pemateri").autocomplete('<?php echo base_url()?>home/ac_pemateri.html', {
						autoFill: true,
						mustMatch: true,
						minChars: 3,
						multipleSeparator: "-",
					}).result(function(data, row) {
						var r = row;
						if (typeof r != 'undefined') {
							$("#pemateri_id").val(r[1]);
						}
				});
				
				var $map = $('#map'), 
				  menu = new Menu($map),			  
				  current,  // current click event (used to save as start / end position)
				  m1,       // marker "from"
				  m2,       // marker "to"
				  center = [<?php foreach($map as $row){echo "$row[lat],$row[lng]";break;}?>];
					
				  // update marker
				  function updateMarker(marker, isM1){
					if (isM1){
					  m1 = marker;
					} else {
					  m2 = marker;
					}
					updateDirections();
				  }
						
				  // add marker and manage which one it is (A, B)
				  function addMarker(isM1){
					// clear previous marker if set
					var clear = {action:'clear', name:'marker', tag:''};
					if (isM1 && m1) {
					  clear.tag = 'from';
					  $map.gmap3(clear);
					} else if (!isM1 && m2){
					  clear.tag = 'to';
					  $map.gmap3(clear);
					}
					// add marker and store it
					$map.gmap3({
					  action:'addMarker',
					  latLng:current.latLng,
					  options:{
						draggable:true,
						icon:new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green' + (isM1 ? 'A' : 'B') + '.png')
					  }, 
					  tag: (isM1 ? 'from' : 'to'),
					  events: {
						dragend: function(marker){
						  updateMarker(marker, isM1);
						}
					  },
					  callback: function(marker){
						updateMarker(marker, isM1);
					  }
					});
				  }
				  
				  // function called to update direction is m1 and m2 are set
				  function updateDirections(){
					if (!(m1 && m2)){
					  return;
					}
					$map.gmap3({
					  action:'getRoute',
					  options:{
						origin:m1.getPosition(),
						destination:m2.getPosition(),
						travelMode: google.maps.DirectionsTravelMode.DRIVING
					  },
					  callback: function(results){
						if (!results) return;
						$map.gmap3({ action: 'setDirections', directions:results});
					  }
					});
					setTimeout(function(){$(".scroll").niceScroll()},10000);
				  }
				  
				  // MENU : ITEM 1
				  menu.add('Direction to here', 'itemB', 
					function(){
					  menu.close();
					  addMarker(false);
					});
				  
				  // MENU : ITEM 2
				  menu.add('Direction from here', 'itemA separator', 
					function(){
					  menu.close();
					  addMarker(true);
					});
				  
				  // MENU : ITEM 3
				  menu.add('Zoom in', 'zoomIn', 
					function(){
					  var map = $map.gmap3('get');
					  map.setZoom(map.getZoom() + 1);
					  menu.close();
					});
				  
				  // MENU : ITEM 4
				  menu.add('Zoom out', 'zoomOut',
					function(){
					  var map = $map.gmap3('get');
					  map.setZoom(map.getZoom() - 1);
					  menu.close();
					});
				  
				  // MENU : ITEM 5
				  menu.add('Center here', 'centerHere', 
					function(){
						$map.gmap3('get').setCenter(current.latLng);
						menu.close();
					});
  
				setTimeout(function(){

					$("#map").gmap3({
							action:'init',
							options:{	
								center: center, 
								zoom: 10				
							},
							events:{
								rightclick:function(map, event){
								  current = event;
								  menu.open(current);
								},
								click: function(){
								  menu.close();
								},
								dragstart: function(){
								  menu.close();
								},
								zoom_changed: function(){
								  menu.close();
								}
							  }
						},
						{	
							action: 'addMarkers',
							markers:[
							 <?php foreach($map as $row){
								echo "{lat:$row[lat], lng:$row[lng], data:'$row[data]'}, \n";
							  }
							  ?>				
							],
							marker:{
								options:{
									draggable: false,
									animation: google.maps.Animation.DROP,
									icon:"<?php echo base_url()?>template/css/images/mosque.png"						
								},
								events:{
									mouseover: function(marker, event, data){
										var map = $(this).gmap3('get'),
										infowindow = $(this).gmap3({action:'get', name:'infowindow'});
										if (infowindow){
											infowindow.open(map, marker);
											infowindow.setContent(data);
										} else {
											$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
										}
									},
									mouseout: function(){
										var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
										if (infowindow){
											infowindow.close();
										}
									},
								 }
							}							
						},
						
						// add direction renderer to configure options (else, automatically created with default options)
						{ action:'addDirectionsRenderer',
						  preserveViewport: true,
						  markerOptions:{
							visible: false
						  }
						},
						// add a direction panel
						{ action:'setDirectionsPanel',
						  id : 'directions'
						}
					);
					
				},1000);
				
			});
			</script>